<template>
  <div class="login">
    <div class="head">学校报名</div>
    <canvas id="canvas" ref="canvas"></canvas>
    <div class="title">
      <span :class="{ active: type === '01' }">注册</span>
      <span :class="{ active: type === '02' }">登录</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      type: "01",
    };
  },
  mounted() {
    var canvas = this.$refs.canvas;
    var ctx = canvas.getContext("2d");
    canvas.width = canvas.parentNode.offsetWidth;
    canvas.height = canvas.parentNode.offsetHeight;
    //如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout
    window.requestAnimFrame = (function () {
      return (
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function (callback) {
          window.setTimeout(callback, 1000 / 60);
        }
      );
    })();
    // 波浪大小
    var boHeight = canvas.height / 30;
    var posHeight = canvas.height / 1.2;
    //初始角度为0
    var step = 0;
    //定义三条不同波浪的颜色
    var lines = [
      "rgba(14, 156, 255, 0.5)",
      "rgba(0,222,255, 0.3)",
      "rgba(157,192,249, 0.1)",
      "rgba(14, 156, 255, 0.8)",
      "rgba(0,168,255, 0.4)",
    ];
    function loop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      step++;
      //画3个不同颜色的矩形
      for (var j = lines.length - 1; j >= 0; j--) {
        ctx.fillStyle = lines[j];
        //每个矩形的角度都不同，每个之间相差45度
        var angle = ((step + j * 50) * Math.PI) / 180;
        var deltaHeight = Math.sin(angle) * boHeight;
        var deltaHeightRight = Math.cos(angle) * boHeight;
        ctx.beginPath();
        ctx.moveTo(0, posHeight + deltaHeight);
        ctx.bezierCurveTo(
          canvas.width / 2,
          posHeight + deltaHeight - boHeight,
          canvas.width / 2,
          posHeight + deltaHeightRight - boHeight,
          canvas.width,
          posHeight + deltaHeightRight
        );
        ctx.lineTo(canvas.width, canvas.height);
        ctx.lineTo(0, canvas.height);
        ctx.lineTo(0, posHeight + deltaHeight);
        ctx.closePath();
        ctx.fill();
      }
      requestAnimFrame(loop);
    }
    loop();
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  position: relative;
  .head {
    height: 180px;
  }
  #canvas {
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(180deg);
    z-index: -1;
  }
  .title {
    display: flex;
    font-size: .533333rem;
    justify-content: space-around;
    span {
      display: inline-block;
      width: 50%;
      text-align: center;
      height: 1.333333rem;
      line-height: 1.333333rem;
      &.active {
        border-bottom: 1px solid #0e9cff;
      }
    }
  }
}
</style>